<template>
    <div class="home-box">
        <nav>
            <div class="top"></div>
            <div class="bottom">
                <MyMenu :menuList="newMenuList" />
            </div>
        </nav>
        <main>
            <header>
                <span></span>
                <i>当前位置：{{menuInfo}}</i>
                <div>
                    <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        您好, {{userInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native = 'loginExit'>退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </header>
            <footer>
                <router-view></router-view>
            </footer>
        </main>
    </div>
</template>

<script>
import store from '@/store'
import MyMenu from './MyMenu.vue'

export default {
    components:{MyMenu},
    data(){
        return {
            userInfo: '',
            newMenuList:[],
            menuInfo:""
        }
    },
 
    computed:{
        menuList(){
            return this.$store.getters['common/menuList']
        }
    },
    mounted(){
        this.userInfo = this.$store.getters['common/userInfo']
        console.log(this.userInfo)

        this.newMenuList = this.makeTree(this.menuList)
       
    },
       watch: {
        '$route.path': {
            immediate: true,
            handler(val) {
                let _this = this
                let nowNode = _this.menuList.find(it => it.path === val)
                let names = [nowNode.name]
                function loop(pId) {
                    let node = _this.menuList.find(it => it.id === pId)
                    names.unshift(node.name)
                    if (!!node.parent_id) loop(node.parent_id)
                }
                loop(nowNode.parent_id)
                _this.menuInfo = names.join(' > ')
            }
        }
    },
    methods:{
        loginOut(){
            this.$router.push('/login')
        },
        loginExit(){
            sessionStorage.clear()
            this.$store.commit('common/clear')
            this.$router.push('/login')
        },
        makeTree(arr){
            let [result,other] = arr.reduce(function(res,it){
                if(!!it.parent_id){
                    res[1].push({...it,key:it.id})
                }else{
                    res[0].push({...it,key:it.id})
                }
                return res
            },[[],[]])
            for(let it of other){
                let idx = result.findIndex(oo => oo.id === it.parent_id)
                if(idx > -1){
                    if(result[idx].children){
                        result[idx].children.push(it)
                    }else{
                        result[idx].children = [it]
                    }
                }else{
                    let pObj = other.find(oo => oo.id === it.parent_id)
                    if(!!pObj){
                        if(pObj.children){
                            pObj.children.push(it)
                        }else{
                            pObj.children = [it]
                        }
                    }
                }
            }
                return  result
       }
    },
}
</script>
<style lang="less" >
@import '@/style/common.less';
    .home-box {
        display: flex;
        position: relative;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        > nav {
            flex: 0 0 14rem;
            height: 100%;
            background-color: @dc02;
            > .top  {
                width: 100%;
                height: 7.5rem;
                background: url('@/images/navLogo.png') center center / 70% no-repeat;
            }
            > .bottom {
                width: 100%;
                height: calc(100% - 7.5rem);
                overflow-x: hidden;
                > .el-menu{
                    border:0;
                }
                .menu-icon{
                    .my-font();
                }
            }
        }
        > main {
            flex: 1;
            overflow-y: hidden;
            width: 0;
            > header {
                height: 3rem;
                background-color: @dc02;
                width: 100%;
                > span {
                    display: block;
                    float: left;
                    margin-left: .5rem;
                    width: 3rem;
                    height: 3rem;
                    background: url('@/images/navv.png') center / 80% no-repeat;
                }
                > i {
                        display: inline-block;
                        height: 3rem;
                        line-height: 3rem;
                        color: #fff;
                        margin-left: .5rem;
                        font-style: normal;
                        font-size: .8rem;
                    }
                > div {
                    height: 3rem;
                    line-height: 3rem;
                    float: right;
                    display: inline-block;
                    margin-right: 20px;
                    color: #fff;
                    > .el-dropdown {
                        color: #fff;
                        font-size: .7rem;
                    }
                }
            }
            > footer {
                height: calc(100% - 2.4rem);
                width: 100%;
                padding: .5rem .5rem 1rem;
                background-color: @gc04;
                overflow-x: hidden;
            }
        }
    }
</style>